Vue 的学习之路（二）

只有不断找寻机会的人才会及时把握机会，越努力，越幸运。

一、过滤器 filter 的学习

注意：vue的过滤器有两种，一种是全局的，一种是私有的（局部的），全局的写法是：filter:{}，而局部的写法是：filters:{}

1. 用法一：在双括号里插值

1	{{ 'ok' \| globalFilter }}

用法二：在v-bind表达式中使用

1	<div v-bind:data="'ok' \| globalFilter" ></div>

2.过滤器的参数一

1	{{ message \| filterA \| filterB }}

上面代码中，message是作为参数传给filterA的函数，而filterA函数的返回值作为参数传给filterB函数，最终显示的结果是由filterB返回的，例如:

<h1>{{'2019' | filterA | filterB}}</h1>
filters:{
	filterA:function(val){
		return val + '年'
	},
	filterB:function(val){
		return val + '大家好！'
	}
}
// 最终输出的结果就是
	2019年大家好！

过滤器的参数2

1	{{ message \| filterA('arg1', arg2) }}

上面代码中，filterA的第一个参数是message，依次是’arg1’,arg2

<h2>{{ '2019' | filterA('10','19') }}</h2>
filters:{
	filterA:function(val,arg1,arg2){
		return val + '-' + arg1 + '-' + arg2
	}
}
// 最终输出的结果是
	2019-10-19

过滤器的参数3

1	{{ 'a','b' \| filterB }}

上线代码表示’a’和’b’分别作为参数传给filterA

<h3>{{ 'Hello','World' | filterA }}</h3>
filters:{
	filterA:function(val,val2){
		return val + '  ' + val2
	}
}
// 最终输出的结果是
Hello World

二、Vue 的按键修饰符

vue 为我们提供了几个特殊的按键监控包括Tab, Enter, Delete, Esc, Space, Up, Down, Left, Right

使用场景是，例如一些网站注册或者登陆，可以按回车键代替按钮的功能，就可以这么写：

1	<button @keyup.enter="login()" @click="login()">登陆</button>

上面的按钮就是在使用鼠标点击和按回车键都会跳转登陆

三、生命周期函数

Vue 生命周期函数

四、基于resource的Ajax数据请求

1 get请求

function(){
	this.$http.get('url').then(result=>{
		//请求之后的数据处理
	})
}
//其中参数 url 是请求的地址

2 post 请求

function(){
    this.$http.post('url',{sendData},{emulateJSON:true}).then(result=>{
		//请求之后的数据处理
	})
}
// 其中参数 url 是请求的地址，sendData 是发送的数据，emulateJSON：true 固定写法

五、axios 的接口调用

1 axios 的基本用法

1
2
3

axios.get('url').then(res=>{
	console.log(res.data)
})

2 axios 的常用API

1 get 查询数据

1.1 get 通过 URL 传递参数

1
2
3

axios.get('/data?id=123').then(res=>{
    console.log(res.data)
})

1.2 get 通过 params 传递参数

axios.get('/data',{
          params:{
          	id:123
          }
       }).then(res=>{
    console.log(res.data)
})

2 post 添加数据

axios.post('/data',{
    username: "user",
    password: 123456
}).then(res=>{
    console.log(res.data)
})

3 put 修改数据 (用法以及传参同 post )

4 delete 删除数据(用法以及传参同 get )

3 async/await 的基本用法

async/await 是ES7 引入的新语法，可以更加方便的进行异步操作
async 关键字用于函数上（async 函数的返回值是promise实例对象）

await 关键字用于 async 函数单中（await 可以得到异步的结果）

async function queryData(id){
    const res = await axios.get('/data');
    return res;
}
queryData.then(res=>{
    console.log(res)
})

六、Vue 动画

1 使用原生方法

注意：1、使用transition 元素，把需要被动化控制的元素包裹起来 transition 是Vue 官方提
2、自定义两组样式，来控制transition 内部的元素实现动画

<style>
    /* v-enter 【这是一个时间点】是进入之前元素的始状态，此时没有进入*/
    /* v-leave-to 【这也是一个时间点】是动画离开之后，离开的终止状态，此时元素动画结束 */
    .v-enter{
        opacity: 0;
        margin-left: 1800px;
    }
    .v-leave-to {
        opacity: 0;
        margin-top: 200px;
    }
    /* v-enter-active 【入场动画的时间段】
    v-leave-active 【出场动画的时间段】 */
    .v-enter-active,
    .v-leave-active {
        transition: all 1s ease;
    }

    /* 不使用v-前缀，自定义前缀 */
    .my-enter{
        opacity: 0;
        margin-bottom: 100px;
    }
    .my-leave-to {
        opacity: 0;
        margin-top: 200px;
    }
    .my-enter-active,
    .my-leave-active {
        transition: all 1s ease;
    }

</style>

<div id="app">
    <!-- 需求：点击按钮h3 显示，再点击h3消失 -->
    <!-- 步骤：
		1、使用transition 元素，把需要被动化控制的元素包裹起来
			transition 是Vue 官方提供的
	2、自定义两组样式，来控制transition 内部的元素实现动画 -->
    <input type="button" value="toggle" @click="flag=!flag">
    <transition>
        <h3 v-if="flag">这是一个H3</h3>
    </transition >
    <hr>
    <!-- 不使用v-前缀，自定义前缀-->
    <input type="button" value="toggle2" @click="flag2=!flag2">
    <transition  name="my" mode="">
        <h2 v-if="flag2">这是一个H2</h2>
    </transition >

</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            flag: false,
            flag2: false
        },
    });
</script>

2 使用animated 动画

<!-- 需要引入animated 库 -->
<link rel="stylesheet" href="lib/animate.min.css">

<input type="button" value="toggle" @click="flag = !flag">
<!-- 使用 :duration 来同意设置入场跟出场是的动画时间 -->
<!-- 也可以使用 :druation{ enter:200, leave:300 } 来分别设置入场跟出场的动画时间 -->
<transition enter-active-class="animated bounceIn" leave-active-class="animated flipInY" :duration=400>
    <h3 v-if="flag">这是一个H3</h3>
</transition>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            flag: false
        },

    });
</script>

组件的创建和使用

1 第一种创建组件的方式

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-com1></my-com1>
    </div>
    <script>
        // 第一种写法
        // 使用vue.extend 来创建vue组件
        // var com1 = Vue.extend({
        //     template:'<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过template属性 指定了组件要展示的HTML结构
        // })
        // Vue.component('myCom1', com1);


        // 第二种写法
        Vue.component('myCom1',Vue.extend({
            template:'<h3>这是使用 Vue.extend 创建的组件</h3>'
        }))
         var vue = new Vue({
            el : '#app',
            data : {  },
            methods : {  }    
        });
    </script>
</body>

</html>

2 第二种创建组件的方式

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-com2></my-com2>
    </div>
    <script>
        // 注意：不论是哪种方式创建出来的组件，组件的template 属性指向的模板内容，有且只有一个根元素
        Vue.component('myCom2',{
            template:'<h3>这是直接创建的组件</h3>'
                
        })

         var vue = new Vue({
            el : '#app',
            data : {  },
            methods : {  }    
        });
    </script>
</body>

</html>

3 第三种创建组件的方式

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-com3></my-com3>
    </div>
    <!-- 在被控制的APP外面使用template元素，定义组件的HTML模板结构 -->
    <template>
        <div>
            <h1>这是通过template 元素，在外部定义的组件结构，这个方式有代码的提示和高亮</h1>
            <h4>好用不错</h4>
        </div>
    </template>
    <script>
        Vue.component('myCom3',{
            template:'#tml'
        })

         var vue = new Vue({
            el : '#app',
            data : {  },
            methods : {  }    
        });
    </script>
</body>

</html>

七、vuex

1. vuex 介绍

2. vuex 配置步骤及操作


// 1. 运行
npm i vuex -S* 
// 2. 导入包
import Vuex from 'vuex'
// 3. 注册 vuex 到 vue 中 
Vue.use(Vuex)
// 4. 创建一个 Vuex 的实例 store ，得到一个数据仓储对象
var store = new Vuex.store({
    state: {
        // 可以理解为 组件中的 data  专门用来存储数据
        count: 0
    },
    mutations: {
        // 可以理解为 组件中的 methods
        // 如果要操作 state 中的值，只能通过 mutations 提供的方法，才能操作对应数据，不推荐直接操作 state 中的		// 数据，，因为万一导致数据紊乱，態快速定位到错误的原因，因为每个组件都可能操作
        function (state, pars){ 
            // 此处 第一个参数 state 固定,并且只能传两个参数，第二个参数可以是对象、数组...
            // 第二个参数 pars 是通过 commit 提交过来的
            state.count++
        }
    },
    getters: {
        // 这里的 getters 只负责提供数据，不负责修改数据
    }
})
// 5. 把 store 挂在到 vue 实例对象中
new Vue({
    el: '#app',
    store,
    components: { App },
    template: '<App/>'
})

注意：如果要调用 mutations 中的方法，只能使用 this.$store.commit(‘方法名’)。